<template>
  <!-- 面包屑 -->
  <div class="bread">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/ums/admin' }">权限</el-breadcrumb-item>
      <el-breadcrumb-item>分配菜单</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="menuList">
    <el-tree :data="data" show-checkbox node-key="id" :props="defaultProps" />
    <div class="btn">
      <el-button type="primary">保存</el-button>
      <el-button>清空</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { watchEffect, ref } from "vue";
import type { Ref } from "vue";
import * as api from "../../request/api";
import { useRoute } from "vue-router";

let route = useRoute();
const data: Ref<any[]> = ref([]);

//分割字符串
let id = Number(route.fullPath.split("=")[1]);

const defaultProps = {
  children: "children",
  label: "label",
};

watchEffect(async () => {
  let table = await api.admin.getRoleListMenu(id);
  // console.log(table);

  let data1 = table.filter((el) => {
    return el.parentId == 0;
  });

  // 过滤
  function filterFn(val: number) {
    let data2 = table.filter((el) => {
      return el.parentId == val;
    });
    let newData2 = data2.map((el) => {
      // console.log(el.title);
      return {
        id: el.id,
        label: el.title,
      };
    });
    return newData2;
  }

  let newData = data1.map((el) => {
    return {
      id: el.id,
      label: el.title,
      children: filterFn(el.id),
    };
  });

  console.log(newData);

  data.value = newData;
});
</script>

<style lang="scss" scoped>
.btn {
  margin-left: 500px;
  margin-top: 100px;
}
.menuList {
  margin: 30px 20px;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 28px;
}
.bread {
  margin: 10px 20px;
  padding: 10px 0;
  border-bottom: 1px solid #d5d2d2;
}
:deep .el-tree-node__content {
  height: 36px;
  font-size: 16px;
}
</style>
